<template>
  <div class="home">
    <el-button type="primary" @click="tianjia">添加</el-button>
<!-- 修改 -->
<div class="divd">
  商品名称:<el-input  class="ipttwo" v-model="q1"  placeholder=""></el-input>
  库存<el-input class="ipttwo" v-model="q2"  placeholder=""></el-input>
  价格<el-input class="ipttwo" v-model="q3"  placeholder=""></el-input>
  状态
  <el-select  v-model="q4" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  已售<el-input class="ipttwo" v-model="q5" placeholder=""></el-input>
  图片链接:<el-input class="ipttwo" v-model="q6" placeholder=""></el-input>
  <el-button class="jinggao" type="warning" plain>修改</el-button>
</div>




    <div class="box" v-show="a">
      <i class="el-icon-circle-close" @click="guanbitianjia"></i>
      <div>
        商品名称:<el-input  class="iptwhole" v-model="addList.goods_name"  placeholder=""></el-input><br>
      </div>
      <div>
        &nbsp;&nbsp;库&nbsp;&nbsp;存:&nbsp;&nbsp;<el-input class="iptwhole" v-model="addList.stock"  placeholder=""></el-input><br>
      </div>
      <div>
        &nbsp;&nbsp;价&nbsp;&nbsp;格:&nbsp;&nbsp;<el-input class="iptwhole" v-model="addList.price"  placeholder=""></el-input><br>
      </div>
      <div>&nbsp;&nbsp;状&nbsp;&nbsp;态:
        <el-select  v-model="addList.status" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        
        <br>
      </div>
      <div>
        &nbsp;&nbsp;已&nbsp;&nbsp;售:&nbsp;&nbsp;<el-input class="iptwhole" v-model="addList.sold" placeholder=""></el-input><br>
      </div>
      <div>
        图片链接:<el-input class="iptwhole" v-model="addList.img" placeholder=""></el-input><br>
      </div>
      <div>
          <el-button class="tijiaocss" type="danger" @click="tijiao">提交</el-button>
      </div>
  </div>



  <el-table
  :data="addIndex"
  height="600"
  border
  style="width: 100%">
  <el-table-column
  prop="id"
  label="id"
  width="100">
</el-table-column>

<el-table-column
    prop="goods_name"
    label="商品名称"
    width="100">
  </el-table-column>
  <el-table-column
    prop="stock"
    label="库存"
    width="100">
  </el-table-column>
  <el-table-column
    prop="price"
    label="价格"
    width="100">
  </el-table-column>

  <el-table-column
    prop="status"
    label="状态"
    width="100">
  </el-table-column>
  <el-table-column
    prop="sold"
    label="已售"
    width="100">
  </el-table-column>
  <el-table-column
    prop="img"
    label="图片链接地址"
    >
  </el-table-column>
  <el-table-column
    prop=""
    label="操作"
    width="200">

    <el-button type="primary" @click="xiugai()"  icon="el-icon-edit" circle></el-button><el-button @click="shanchu(index)" type="danger" icon="el-icon-delete" circle></el-button>

  </el-table-column>
</el-table>




  <!-- <table class="tab" border="1">
    <thead>
        <tr>
          <th>id</th>
            <th>商品名称</th>
            <th>库存</th>
            <th>价格</th>
            <th>状态</th>
            <th>已售</th>
            <th>图片链接</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr v-for="(item,index) in addIndex" :key="index">
           <td>{{item.id}}</td>
           <td>{{item.goods_name}}</td>
           <td>{{item.stock}}</td>
            <td>{{item.price}}</td>
            <td>{{item.status}}</td>
            <td>{{item.sold}}</td>
            <td class="tds" colspan="2">{{item.img}}</td>
            <td>  <el-button type="primary"  icon="el-icon-edit" circle></el-button><el-button @click="shanchu(index)" type="danger" icon="el-icon-delete" circle></el-button></td>
        </tr>
    </tbody>
</table> -->

<!-- 分页 -->
<div class="divbox">
  <el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

</div>
  </div>
</template>
<script>
import axios from 'axios'

export default {
  name: 'HomeView',
    data(){
        return{
        q1:'',
        q2:'',
        q3:'',
        q4:'',
        q5:'',
        q6:'',
            // input1: '',
            // input2: '',
            // input3: '',
            // input4: '',
            a:false,
            addIndex:[],

            addList: {
        goods_name: '',
        stock: '',
        price: '',
        status: '',
        sold: '',
        img: '',
      },

            // 状态
            options: [{
          value: 1,
          label: '上架'
        }, {
          value: 2,
          label: '下架'
        }],
        value: '请选择'
        }
    },
    methods: {
  
        // 点击添加显示框
        tianjia(){
            this.a = true      
        },
        // 关闭添加显示框
        guanbitianjia(){
            this.a = false
        },
// 获取
        huoqu(){
      axios.get('http://liu.zzgoodqc.cn/goodsx/goodslist').then((res)=>{
				// console.log(res.data.data);
        this.addIndex = res.data.data
			})

    },

         // 提交
         tijiao(){
          axios({
  method:'post',
  url:'https://liu.zzgoodqc.cn/goodsx/add',
  data:this.addList,
  })
  .then(()=>{

    this.addList={
      name: '', 
      id:'',  
      goods_name: '',
          stock: '',
          price: '',
          status: '',
          sold: '',
          img: '',
  }
})
        },

        // 修改
        xiugai(){

          axios.post('http://liu.zzgoodqc.cn/goodsx/update').then(()=>{
                    // this.q1= this.addIndex[index].goods_name
                    // this.q2= this.addIndex[index].stock
                    // this.q3= this.addIndex[index].price
                    // this.q4= this.addIndex[index].status
                    // this.q5= this.addIndex[index].sold
                    // this.q6= this.addIndex[index].img
        
			})
         
        },

// // // 删除
        shanchu(index) {
          axios.get('http://liu.zzgoodqc.cn/goodsx/delete?id=${index}').then(()=>{
      
        if (confirm("确定要删除吗") == true) {
        this.addIndex.splice(index, 1);
      } else {
        return false;
      }
			})
     
    },
     
       
    },
    mounted(){
   this.huoqu()
  //  添加
		}
}
</script>
<style scoped>
.divd{
  margin-bottom: 20px;
}
.jinggao{
  margin-left: 20px;
}
.ipttwo{
  width: 150px;
}


.divbox{
 text-align: center;
 margin-top: 20px;
}
.tijiaocss{
  width: 150px;
 margin-left: 130px;
 margin-top: 10px;
}
.iptwholeXiugai{
    width: 150px;
}
.el-icon-circle-close{
    position: absolute;
    right: 10px;
}
.box div{
    margin-top: 10px;
}
.iptwhole{
    width: 300px;
}

.box{
    padding-top: 5px;
    width: 420px;
    height: 440px;
    background: rgba(222, 222, 222, 0.5);
    border-radius: 20px;
    margin: auto;
    position: relative;
    padding-left: 20px;
    margin-bottom: 10px;
}
</style>>

